/*
 * @Description: 表单
 * @Author: Zzt
 * @Date: 2022-08-09 14:59:01
 * @LastEditTime: 2022-08-11 10:29:47
 */

import { Button, Space, Table, Tag } from 'antd';
import { useMemo, useState } from 'react';
import { useDestructionContext } from '../contexts/DestructionContext';
import type { IPageQuery } from '@/interfaces/global';
import ExamineForm from './dialogs/examineForm';
import SeeFrom from './dialogs/SeeFrom';

const { Column } = Table;

const PageList = () => {
  console.log('档案坚定审核++++++++++++++++++');
  const { stateColorFilter, stateFilter, appraisalList } = useDestructionContext();
  // 表格加载
  const [loading] = useState(false);
  // 选中的表格项目
  const [selectTransfer, setSelectTransfer] = useState({});
  // 编辑弹窗
  const [tFormVisible, setTFormVisible] = useState(false);
  // 编辑弹窗
  const [FormVisible, setFormVisible] = useState(false);

  /**
   * @description: 关闭编辑弹窗
   */
  const closeEditDialog = () => {
    setTFormVisible(false);
    setSelectTransfer({});
  };
  /**
   * @description: 关闭编辑弹窗
   */
  const closeSeeDialog = () => {
    setFormVisible(false);
    setSelectTransfer({});
  };

  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  const [total] = useState(0);
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  /**
   * @description: 打开编辑弹窗
   * @param {any} data 选中的条目
   */
  const handleExamine = (data: any) => {
    setSelectTransfer(data);
    setTFormVisible(true);
  };
  const seeAppraisal = (data: any) => {
    setSelectTransfer(data);
    setFormVisible(true);
  };

  return (
    <>
      <Table
        dataSource={appraisalList}
        loading={loading}
        rowKey="id"
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="销毁单名称" dataIndex="name" key="name" align="center" />
        <Column title="全宗" dataIndex="dossier" key="dossier" align="center" />
        <Column title="档案类型" dataIndex="recordType" key="recordType" align="center" />
        <Column
          title="状态"
          dataIndex="state"
          key="state"
          align="center"
          render={(text) => <Tag color={stateColorFilter(text)}>{stateFilter(text)}</Tag>}
        />
        <Column title="处理人" dataIndex="conductor" key="conductor" align="center" />
        <Column title="销毁日期" dataIndex="destroyTime" key="destroyTime" align="center" />
        <Column title="销毁描述" dataIndex="destroyDescribe" key="destroyDescribe" align="center" />
        <Column title="申请时间" dataIndex="applyTime" key="applyTime" align="center" />
        <Column title="审核时间" dataIndex="auditTime" key="auditTime" align="center" />
        <Column
          title="相关鉴定单"
          dataIndex="relatedAuthenticae"
          key="relatedAuthenticae"
          align="center"
          render={(_text, record: any) => (
            <Space direction="vertical">
              <Button
                type="link"
                size="small"
                onClick={() => {
                  seeAppraisal(record);
                }}
              >
                查看
              </Button>
            </Space>
          )}
        />
        <Column
          title="审核操作"
          key="action"
          align="center"
          width={200}
          render={(_text, record: any) => (
            <Space direction="vertical">
              <Button
                type="link"
                size="small"
                onClick={() => {
                  handleExamine(record);
                }}
              >
                {record.state === 0 ? '处理' : '查看'}
              </Button>
            </Space>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <SeeFrom
            visible={FormVisible}
            data={selectTransfer}
            onClose={() => {
              closeSeeDialog();
            }}
          />
        ),
        [FormVisible]
      )}
      {useMemo(
        () => (
          <ExamineForm
            visible={tFormVisible}
            data={selectTransfer}
            onClose={() => {
              closeEditDialog();
            }}
          />
        ),
        [tFormVisible]
      )}
    </>
  );
};
export default PageList;
